<template>
    <div class="detailContain">
        <div class="bgImg" :style="allContain"></div>
        <div class="containAll">
          <!-- 这个是title -->
          <div class="showAll">
            <div>
              <el-row >
                <el-col :span="24" class="colorWhite">
                  <el-breadcrumb separator=">">
                    <el-breadcrumb-item class="colorWhite" :to="{ path: '/squares/' }">需求广场</el-breadcrumb-item>
                    <el-breadcrumb-item class="colorWhite" >详情</el-breadcrumb-item>
                  </el-breadcrumb>
                </el-col>
              </el-row>
            </div>
            <!-- 内容 -->
            <div class="itemContent2">
              <el-row class="contentTitle padding035">
                苏州2.5产业园储能项目
              </el-row>
              <el-row class="bgWhite">
                <el-col :span="24">
                  <el-row class="padding035">
                    <el-col :span="24" class="itemGeneralize">
                      项目概括
                    </el-col>
                  </el-row>
                  <el-row class="margit035 lineHeight50 boderBottom">
                    <el-col :span="8">
                      <span class="itemLabel">需求编号：</span>
                      <span class="itemContent">CN005</span>
                    </el-col>
                    <el-col :span="8">
                      <span class="itemLabel">需求编号：</span>
                      <span class="itemContent">CN005</span>
                    </el-col>
                    <el-col :span="8">
                      <span class="itemLabel">需求编号：</span>
                      <span class="itemContent">CN005</span>
                    </el-col>
                  </el-row>
                  <el-row class="margit035 lineHeight50 boderBottom">
                    <el-col :span="8">
                      <span class="itemLabel">需求编号：</span>
                      <span class="itemContent">CN005</span>
                    </el-col>
                    <el-col :span="8">
                      <span class="itemLabel">需求编号：</span>
                      <span class="itemContent">CN005</span>
                    </el-col>
                    <el-col :span="8">
                      <span class="itemLabel">需求编号：</span>
                      <span class="itemContent">CN005</span>
                    </el-col>
                  </el-row>
                  <el-row class="margit035 lineHeight50 boderBottom">
                    <el-col :span="24">
                      <el-row>
                        <el-col class="itemLabel" :span="2">需求描述：</el-col>
                        <el-col class="itemDesc" :span="22">这里是描述这里是描述这里是描述这里是描述这里是描述这里是描述这里是描述这里是描述这里是描述这里是描述这里是描述这里是描述这里是描述这里是描述这里是描述这里是描述这里是描述这里是描述这里是描述这里是描述这里是描述这里是描述这里是描述这里是描述这里是描述这里是描述这里是描述这里是描述这里是描述这里是描述</el-col>
                      </el-row>
                    </el-col>
                  </el-row>
                  <el-row class="margit035 lineHeight50 boderBottom">
                    <el-col :span="24">
                      <el-row class="lineHeight50">
                        <el-col class="itemLabel" :span="2.3">总投资预算：</el-col>
                        <el-col class="itemPrice" :span="21">150-250万元</el-col>
                      </el-row>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
              <!-- 需求详情 -->
              <el-row class="padding035 bgWhite">
                <el-col :span="24" class="itemGeneralize marginTop50">
                  需求详情
                </el-col>
                <el-col :span="24" class="detailTitle2 marginTop27">
                  苏州产业园储能项目
                </el-col>
                <el-col :span="24" class="padding30 lineHeight28">
                  设备、多协议打通，可接入任何设备，可拓展各种服务智能场景：智能园区 - 智能办公服务内容：标准解决方案定制解决方案通过开发物联网云平台，实现通过WEB端和APP端，
监测影院激光光源产品设备的能耗、工作状态。实现远程控制，充值，故障报警灯功能，加强对设备信息管理，数据可视化显示。加强对设备的运维工作,工单流程跟踪等通过开
发物联网云平台，实现通过WEB端和APP端，监测影院激光光源产品设备的能耗、工作状态。监测影院激光光源产品设备的能耗、工作状态。实现远程控制，充值，故障报警灯功
能，加强对设备信息管理，数据可视化显示。加强对设备的运维工作,工单流程跟踪等通过开发物联网云平台，实现通过WEB端和APP端，监测影院激光光源产品设备的能耗
                </el-col>
              </el-row>
              <!-- 项目负责人 -->
              <el-row class="bgFd lineHeight80 padding035">
                <el-col :span="8">项目负责人：张三三</el-col>
                <el-col :span="8">联系方式：13435663978</el-col>
                <el-col :span="8"><el-button type="primary" size="large">项目对接</el-button></el-col>
              </el-row>
            </div>
          </div>
          <!-- 这个是内容 -->
          <!-- 这个是广告图片 -->
          <!-- 这个是列表 -->
          <div class="adList">
            <!-- <el-row>
              <el-col :span="12" class="programRecommond">解决方案推荐</el-col>
              <el-col :span="12" class="textRight checkMore">查看更多</el-col>
            </el-row> -->
            <!-- program -->
            <div class="program">
              <div class="programTitle">
                <el-row class="marginBottom20">
                  <el-col :span="12" class="programRecommond">解决方案推荐</el-col>
                  <el-col :span="12" class="textRight checkMore">查看更多</el-col>
                </el-row>
                <el-row class="programList" :gutter="20">
                  <el-col :span="8" class="singleProgram">
                    <el-row class="bgWhite">
                      <el-col :span="24" class="imgContain">
                        <img src="../../assets/images/companyImg.png" alt="">
                      </el-col>
                      <el-col :span="24" class="companyTitle">
                        曙光制动器有限公司储能项目
                      </el-col>
                      <el-col :span="24" class="companyContent">
                        方案摘要：客户需要开发力传感器相关的仪表的硬件
                        和软件需要对接阿里云平台
                      </el-col>
                      <el-col :span="24" class="companyBtn">
                        <el-button type="success" size="mini">主要按钮</el-button>
                        <el-button type="warning" size="mini">主要按钮</el-button>
                      </el-col>
                      <el-col :span="24" class="companyBorder">
                        <el-col :span="4">
                            <div class="imgContains size20">
                              <img src="../../assets/images/loginBg.png" alt="">
                            </div>
                        </el-col>
                        <el-col :span="20">
                          广州科技有限公司
                        </el-col>
                      </el-col>
                    </el-row>
                  </el-col>
                  <el-col :span="8" class="singleProgram">
                    <el-row class="bgWhite">
                      <el-col :span="24" class="imgContain">
                        <img src="../../assets/images/companyImg.png" alt="">
                      </el-col>
                      <el-col :span="24" class="companyTitle">
                        曙光制动器有限公司储能项目
                      </el-col>
                      <el-col :span="24" class="companyContent">
                        方案摘要：客户需要开发力传感器相关的仪表的硬件
                        和软件需要对接阿里云平台
                      </el-col>
                      <el-col :span="24" class="companyBtn">
                        <el-button type="success" size="mini">主要按钮</el-button>
                        <el-button type="warning" size="mini">主要按钮</el-button>
                      </el-col>
                      <el-col :span="24" class="companyBorder">
                        <el-col :span="4">
                            <div class="imgContains size20">
                              <img src="../../assets/images/loginBg.png" alt="">
                            </div>
                        </el-col>
                        <el-col :span="20">
                          广州科技有限公司
                        </el-col>
                      </el-col>
                    </el-row>
                  </el-col>
                  <el-col :span="8" class="singleProgram">
                    <el-row class="bgWhite">
                      <el-col :span="24" class="imgContain">
                        <img src="../../assets/images/companyImg.png" alt="">
                      </el-col>
                      <el-col :span="24" class="companyTitle">
                        曙光制动器有限公司储能项目
                      </el-col>
                      <el-col :span="24" class="companyContent">
                        方案摘要：客户需要开发力传感器相关的仪表的硬件
                        和软件需要对接阿里云平台
                      </el-col>
                      <el-col :span="24" class="companyBtn">
                        <el-button type="success" size="mini">主要按钮</el-button>
                        <el-button type="warning" size="mini">主要按钮</el-button>
                      </el-col>
                      <el-col :span="24" class="companyBorder">
                        <el-col :span="4">
                            <div class="imgContains size20">
                              <img src="../../assets/images/loginBg.png" alt="">
                            </div>
                        </el-col>
                        <el-col :span="20">
                          广州科技有限公司
                        </el-col>
                      </el-col>
                    </el-row>
                  </el-col>
                </el-row>
              </div>
            </div>
          </div>
        </div>
    </div>
  <!-- </ui-container> -->
</template>
<script type="text/javascript">
export default {
  data() {
    return {
      searchInput: "",//选择内容
      select: "",
      allContain: {
        backgroundImage: "url(" + require("../../assets/images/detailBannerBg.png") + ")",
      }
    };
  },
  name: "Detail",
  created() {}
};
</script>

<style lang="scss" type="text/scss" rel="stylesheet/scss" scoped>
.programTitle{
  margin-bottom: 20px;
}
.companyContent{
  padding: 0 15px;
  color: #666666;
  line-height: 20px;
  font-size: 14px;
}
.imgContain{
  width: 100%;
  height:187px;
  padding: 10px;
  background-size: contain;
  img{
    width: 100%;
    height: 100%
  }
}
.companyTitle{
  background: #fff;
}
.companyTitle{
  padding: 0 15px;
  color: #333333;
  line-height: 40px;
  font-size: 16px;
}
.adList{
  margin-top: 45px;
  // padding-top: 75px;
  .programRecommond{
    font-size: 20px;
  }
  .checkMore{
    color: #87888a;
    font-size: 12px;
  }
}
.bgFd{
  box-shadow: 10px 10px 5px #dad8d8;
}
body{
  background: #f6f6f6
}
.detailTitle{
  font-size: 18px;
  color: #333333;
}
.detailTitle2{
  font-size: 16px;
  color: #333333;
}
.itemPrice{
  font-size: 24px;
  color: #cea23a;
}
.itemDesc{
  color: #999999;
  line-height: 26px;
  font-size: 13px;
  padding-top: 12px;
  padding-bottom: 12px;
}
.itemLabel{
  color: #333333;
}
.itemContent{
  color:#999999;
}
.itemGeneralize{
  border-left: 2px solid #138782;
  padding-left: 18px;
  margin-top: 30px;
  margin-bottom: 10px;
  font-size: 18px;
}
.el-breadcrumb__inner,
.el-breadcrumb__separator,
.el-breadcrumb__item{
  font-size: 12px;
}

.detailContain {
  width: 100%;
  background-size: contain;
  position: relative;
  .bgImg{
    width: 100%;
    height: 500px;
  }
  .containAll{
    position: absolute;
    top: 40px;
    width: 1200px;
    z-index: 2;
    left: 50%;
    // background: #ffffff;
    transform: translate(-50%,0);
    .showAll{
      position: relative !important;
      .contentTitle{
        background-size: cover;
        margin-top: 40px;
        background: url('../../assets/images/detaiLine.png') repeat-y;
        line-height: 50px;
        padding: 0 35px;
        font-size: 20px;
        color: #f2f2f2;
      }
    }
  }
}
.companyBtn{
  padding: 0 15px;
  margin: 10px 0;
}
.companyBorder{
  padding: 0 15px;
  padding-top: 10px;
  border-top: 1px solid #cccccc;
  font-size: 13px;
  color: #cccccc;
}
.size20 {
    width: 40px !important;
    height: 40px !important;
}
</style>
